Skip to main content

Styles Bar

Pro Feature

Upgrade to Phoenix Code Pro to access this feature.

The Styles Bar lets you style elements visually right inside the Live Preview, and it automatically syncs your code in real time.
When you select an element in Edit Mode, a bar appears at the bottom of the Live Preview with controls for fonts, colors, borders, spacing, layout, and more.

The controls shown depend on the selected element. For example, text controls are not shown for images.

You can move the bar to the top of the Live Preview using the dock button at the right end of the bar.

Save Changes To​

Phoenix Code gives you control to choose where you want to save your edits. By default, all the changes are saved directly on the element as an inline style. If you want to save the changes in one of the CSS rules, you can click on the Save changes to button:

Save changes to

It shows all the available selectors for that element. Select the one you want, and all the changes made to that element will automatically get saved in that selector.

Each selector also shows the number of elements it affects on the page.

Creating a New Rule​

Click Create new rule… to save your edits in a new CSS rule. Type a class like .card or an id like #hero and click Create. Phoenix Code creates the rule and also adds the class or id to the element, so the rule applies right away.

Editing Element States​

The State dropdown in the popover lets you style the element's hover, focus, and active states. Pick a state and the Live Preview turns it on while you edit, with a banner showing which state you are editing.

For any other state, type it in the Create new rule field, for example .button:disabled.

If your CSS already has state rules for the element, like .button:hover, they also show up in the Save changes to list, grouped at the bottom after all the regular selectors. Picking one switches to that rule and turns its state on for editing.

States need a CSS rule to live in, so they are not available when saving to inline styles.

Font Family​

Opens a font picker with three tabs:

  • System: Common system fonts like Arial, Georgia, and Verdana. These need no download and work everywhere.
  • Google: The full Google Fonts collection. Popular fonts are shown first, and you can search for any font. Each font is shown in its own style, so you can see how it looks before picking it. Picking one adds the Google Fonts link to your HTML.
  • Manual: Type any font name yourself. You can also upload a font file (.ttf, .otf, .woff, .woff2), and Phoenix Code adds it to your project and applies it.

Fonts already used on the page appear in an On this page group, so you can reuse them quickly.

Font Size​

Sets the font size. Type a value or use the +/- buttons. Click the unit button to switch between px, em, rem, and %, and the value is converted to the new unit automatically.

These shortcuts work in every number field of the Styles Bar: scroll over a field to change its value, hold Shift while clicking +/- for bigger steps (x10), or hold Alt for smaller ones (x0.1).

Text Style​

The text style popover has two tabs.

The Format tab:

  • Font weight: Controls how thick the text is, with a slider from Thin (100) to Black (900).
  • Format: Italic, underline, strikethrough, and overline.
  • Alignment: Aligns text left, center, right, or justified.
  • Case: Shows text as uppercase, lowercase, or capitalized, without changing the text in your HTML.
  • Cursor: The mouse cursor shown when hovering over the element, like pointer or grab.

The Spacing tab:

  • Line height: The vertical space between lines of text.
  • Letter spacing: The space between characters.
  • Word spacing: The space between words.
  • Text indent: How far the first line of text is indented.

To learn more about these properties, see MDN's text styling guide.

Looking for bold? Use the font weight slider.

Background Color​

The Background color button shows the element's current background color. Click it to open a full color picker:

  • Pick a color visually, or type one as Hex, RGB, or HSL.
  • The opacity field controls how see-through the color is.
  • The eyedropper lets you pick a color from anywhere on the page.
  • Swatches shown on the left side displays all the colors already used in the page, plus a set of common colors.

The eyedropper is not available in Firefox, Safari and in the Linux desktop app.

Text Color​

The Text color button works the same way as Background Color, but it controls the color of the element's text. It opens the same color picker.

Border & Outline​

The popover has two tabs, Border and Outline.

The Border tab:

  • Style: None, solid, dashed, dotted, or double. Hovering an option previews it on the element.
  • Width: The thickness of the border.
  • Color: Click the swatch to open the color picker to set the color of the border.
  • Radius: Rounds the corners of the bordered element.

By default, edits apply to all four sides of the border. Use the sides button in the popover header to edit only the top, right, bottom, or left side.

The Outline tab has the same style, width, and color options, plus:

  • Offset: The gap between the outline and the element's edge.

An outline is drawn outside the element's border and takes up no space on the page.

Box Model​

The popover has three tabs, Size, Padding, and Margin. They sit together because they measure one element from the inside out.

The Size tab:

  • Width and Height: The element's size. Empty fields show the current size of the element as placeholders.
  • Min / max: Click the chip to set minimum and maximum size limits. This is very useful for creating responsive web pages.

The Padding and Margin tabs each show four fields for the top, right, bottom, and left sides, arranged around a frame just like they sit on the page.

Padding is the space inside the element, between its content and its border. Margin is the space outside it.

The button in the center of the frame controls how the sides are linked:

  • Independent: Each side has its own value.
  • Paired: Top and bottom are linked, left and right are linked.
  • All linked: One value for every side.

Linked fields are color coded so you can see which sides move together.

Layout​

The popover has two tabs, Display and Position.

The Display tab:

  • Display: How the element is laid out: Block, Inline, Flex, Grid, Hidden, and more. Picking Flex or Grid reveals options like direction, alignment, wrap, and gap.
  • Opacity: How see-through the element is. This fades the whole element, including its text and children.

The Position tab:

  • Position: Static, Relative, Absolute, Fixed, or Sticky, with fields to offset the element from each side.
  • Z-index: Which element appears on top when elements overlap.

To learn more about these properties, see MDN's guides on display and position.

Removing a Style​

Right-click any control inside a popover, like a number field, a color swatch, or a dropdown, to open a menu with three actions: Remove, Reset to browser default, and Learn more….

Learn more… opens this documentation page in your browser, so you can read it whenever you need help.

Remove​

Remove <property> deletes the style from wherever it is actually written in your code. The line under it tells you where that is, either the CSS rule and its file, like .card (style.css), or this element's inline style.

Remove in the right-click menu

For number fields, you can also just empty the field to remove the style, without opening the menu.

For a CSS rule, it also shows how many elements that rule affects, so you know what else on the page changes when you delete it.

This action is disabled in two cases:

  • Not set on this element: there is nothing to remove.
  • Set by a shorthand, use Reset instead: the value comes from a shorthand like font or border. Deleting that line would take the other values in it along too, so use Reset to browser default instead.

Reset to Browser Default​

Reset to browser default puts the property back to what the browser uses when no CSS sets it. The line under it shows exactly what gets added, for example font-size: revert.

Reset to browser default in the right-click menu

This action is always available. It writes on the element itself, so only that one element changes even when the value comes from a shared rule. It also works for values coming from a rule you cannot edit, like one in a library stylesheet.

This is not the same as the Reset button in the popover header. That one only undoes the changes you made since opening the popover. See Reset and Undo.

When a Field Will Not Clear​

Sometimes you empty a field and the old value comes straight back. That happens when the value is written somewhere your current Save changes to target cannot reach.

Phoenix Code shows a notice telling you where the value really lives, for example Font Size is set by .card (style.css), with buttons to fix it:

  • Remove: deletes the style at that place, the same as the menu action above. This button only shows up when the style can be deleted on its own.
  • Reset: adds revert on this element only.

Notice shown when a field will not clear

When a Change Is Overridden​

Sometimes a more specific CSS rule wins over the rule you are editing, so your change has no visible effect. In that case, Phoenix Code automatically adds !important to your change to make it take effect.

If the change is still overridden even after the !important property, Phoenix Code shows a notification with an Apply anyway button, which applies the style directly on the element so it always takes effect.

Notice shown when a change is overridden

Read more about CSS specificity on MDN.

Reset and Undo​

Every popover has a Reset button in its header. It reverts all the changes you made since opening that popover. If you have not changed anything, the button stays disabled.

Reset button

You can also undo any Styles Bar edit with Ctrl/Cmd + Z, like every other Edit Mode operation. See Undo and Redo.

Hiding the Styles Bar​

To hide the bar, open the More Options menu (three-dots icon) in the Control Box and unselect Show Styles Bar. While hidden, a palette icon appears in the Control Box tools to bring it back.

Show Styles Bar in the More Options menu